<template >
    <div id="book"></div>
</template>
<script>
import * as echarts from 'echarts';
import axios from 'axios'
import {
    DatasetComponent,
    TooltipComponent,
    LegendComponent
} from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
    DatasetComponent,
    TooltipComponent,
    LegendComponent,
    PieChart,
    CanvasRenderer,
    LabelLayout
]);

export default {
    name: 'book',
    data() {
        return {
            books: {
                total: 0,
            },
        }
    },
    methods: {
        getChart() {
            var chartDom = document.querySelector('#book');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['20%', '40%'],
                        avoidLabelOverlap: true,
                        label: {
                            show: false,
                            fontSize: '20',
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '20',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: true
                        },
                        data: [
                            {
                                value: '',
                                name: ''
                            },
                            {
                                value: '',
                                name: ''
                            }
                        ]
                    },
                ]
            };
            myChart.showLoading();
            axios.get("http://localhost:8080/book")
                .then(data => {
                    let res = data.data;
                    if (res.code == 1) {
                        this.books.total = res.data.length;
                        myChart.hideLoading();
                        myChart.setOption({
                            title: [
                                {
                                    text: '书本数量',
                                    textStyle: {
                                        color: 'red'
                                    },
                                    left: 'center',
                                    top: 'bottom',
                                },
                            ],
                            series: [
                                {
                                    name: 'Access From',
                                    type: 'pie',
                                    radius: ['30%', '60%'],
                                    avoidLabelOverlap: true,
                                    label: {
                                        show: false,
                                        fontSize: '20',
                                        position: 'center'
                                    },
                                    emphasis: {
                                        label: {
                                            show: true,
                                            fontSize: '20',
                                            fontWeight: 'bold'
                                        }
                                    },
                                    labelLine: {
                                        show: true
                                    },
                                    data: [
                                        {
                                            value: this.books.total,
                                            name: '书本数量'
                                        },
                                        {
                                            value: 123,
                                            name: '书本数量'
                                        }
                                    ]
                                },
                            ]
                        });
                    } else {
                        // TODO 请求失败
                    }

                })
                .catch();

        },
    },
    mounted() {
        this.getChart();
    }

}

</script>

<style scoped>
#book {
    display: inline-block;
    height: 400px;
    width: 25%;
}
</style>